import React, { useContext, useMemo } from 'react'
import Myback from '../conponent/Myback'
import Ctx from '../store/Ctx'
import type { RouteComponentProps } from 'react-router-dom'
import type { dataTS } from '../store/type'
import { Arrow, Like } from '@react-vant/icons'
import { Card, Image, Button, Toast, Space, Dialog } from 'react-vant'


export default function Details(props: RouteComponentProps) {

  //获取数据
  let obj = useContext(Ctx)

  //获取id
  let id = props.location.state
  //console.log(id);

  //使用缓存属性查找id
  let itemobj = useMemo(() => {
    return obj.datalist.find((item: dataTS) => {
      return item.id === id
    })
  }, [obj.datalist, id])


  return (
    <div>
      <Myback title={'详情页'} leftText></Myback>

      {/* 卡片 渲染详情页 */}
      <div>
        <Card round style={{ marginBottom: 20 }}>
          <Card.Cover>
            <Image src={itemobj.img} height={'60vh'} />
          </Card.Cover>
          <Card.Header>
            {itemobj.title}
          </Card.Header>
          <Card.Body>
            {itemobj.ms}
          </Card.Body>
          <Card.Footer>
            <Space>
              <span onClick={(e) => {
                //阻止事件冒泡
                e.stopPropagation()
                obj.dispatch({
                  //收藏状态切换
                  type: 'change_collect',
                  payload: itemobj.id
                })
              }}>
                {itemobj.collect ? '已收藏' : '未收藏'}
              </span>
              <Button round size='mini' type={itemobj.sub ? 'warning' : 'default'}
                onClick={(e) => {
                  //阻止事件冒泡
                  e.stopPropagation()
                  obj.dispatch({
                    //订阅状态切换
                    type: 'change_sub',
                    payload: itemobj.id
                  })
                }}>
                {itemobj.sub ? '已经订阅' : '免费订阅'}
              </Button>
            </Space>
          </Card.Footer>
        </Card>

      </div>

    </div>
  )
}
